<template>
  <transition name="fade-opacity">
    <div v-show="showSourceModal" class="my-modal-page c-flex-column">
      <header class="c-ph24 c-pt28 c-flex-row c-aligni-center">
        <div @click="clickTab(item.type)" v-for="item in sourceTabList" :key="item.type" class="c-pb20 c-mr50 c-fs26 c-p">
          {{item.name}}
          <div v-show="item.type == curSelectType" class="source-tab-avtive"></div>
        </div>
      </header>
      <section class="c-flex-row c-aligni-center c-w100 c-ph24 c-hh100">
        <input ref="input" class="c-bg-sgray c-flex-grow1 c-w0 c-hh60 c-lh60 c-ph20 c-fs24" v-model="searchName" placeholder='请输入关键字' type="search" @keyup.enter="clickSearch">
        <div id="searchBtn" class="c-pl30 c-fc-sblack c-fs26" @click="clickSearch">搜索</div>
      </section>
      <div @scroll="onScrollEvent" id="souceScroll" class="c-bg-white  c-ph24 c-pb100 c-pt20 c-flex-grow1 c-h0 c-contexty-scroll">
        <div v-for="(item,index) in sourceList" class="c-flex-row c-pb30" :key="index" @click="clickChooseItem(index)">
          <div class="c-flex-row c-flex-center c-pr10" :class="curSelectType == 5 ? 'c-hh140':'c-hh133'">
            <i class="iconfont c-fs24" :class="selectIndex != index ? 'icon-weigouxuan c-fc-gray':'icon-yixuanzhong theme-fc'"></i>
          </div>
          <!-- 左边图片 -->
          <div v-if="curSelectType == 1" class="c-ww200 c-maxh133 c-text-hidden c-p">
            <img class="c-w100 imgCloseBig" :src="$addXossFilter(item.avatar, require('@/assets/defult270.png'))" @error="item.avatar = require('@/assets/defult270.png')" alt="" />
            <img class="icon-course-mark" v-if="item.type == 0 " src="@/assets/i/wap/course/icon_video.png" alt="" />
            <img class="icon-course-mark" v-else-if="item.type == 1 " src="@/assets/i/wap/course/icon_audio.png" alt="" />
            <img class="icon-course-mark" v-else src="@/assets/i/wap/course/icon_pic.png" alt="" />
          </div>
          <div v-else-if="curSelectType == 4" class="c-ww200 c-maxh133 c-text-hidden c-p">
            <img v-lazy="item.avatar || require('@/assets/defult270.png')" class="c-w100 imgCloseBig" />
            <div class="c-pa c-p-t0 c-p-l0 c-fc-white c-fs12 c-textAlign-c c-ww80 c-hh24 c-lh24 theme-bg" v-if="item.isUpdating == 1">更新中...</div>
          </div>
          <div v-else-if="curSelectType == 5" class="c-ww140 c-maxh140 c-text-hidden">
            <img v-lazy="item.avatar || require('@/assets/examination_defult.png')" class="c-w100 imgCloseBig" />
          </div>
          <div v-else-if="curSelectType == 6 || curSelectType == 7" class="c-ww200 c-maxh133 c-text-hidden">
            <img v-lazy="item.avatar || require('@/assets/activity_defult.png')" class="c-w100 imgCloseBig" />
          </div>
          <!-- 右边描述 -->
          <div v-if="curSelectType == 1" class="c-hh153 c-justify-sb c-flex-grow1 c-w0 c-pb20 c-bd-b1 c-ml20 c-flex-column">
            <div class="c-fs24 c-fw-b c-lh32 c-text-ellipsis2 c-fc-xblack">{{item.name}}</div>
            <div class="c-pt8 c-fs18 c-aligni-center c-flex-row">
              <i class="iconfont c-fs18 c-fc-gray">&#xe7a8;</i>
              <span class="c-flex-grow1 c-w0 c-text-ellipsis1 c-fc-gray c-pl4">{{item.lecturer || ''}}</span>
              <div v-if="item.isSaleOnly == 1" class="theme-fc c-fs24">
                <span v-if="item.payType == 2 || item.payType == 4">{{'￥' | iosPriceFilter}}</span>
                {{item.payType == 2 || item.payType == 4 ? `${item.price}` :item.payType == 3 ?'加密': '免费'}}
              </div>
            </div>
          </div>
          <div v-else-if="curSelectType == 4" class="c-hh153 c-justify-sb c-flex-grow1 c-w0 c-pb20 c-bd-b1 c-ml20 c-flex-column">
            <div class="c-fs24 c-fw-b c-lh32 c-text-ellipsis2 c-fc-xblack">{{item.name}}</div>
            <div class="c-flex-row c-aligni-center">
              <span class="c-flex-grow1 c-w0 c-fc-gray c-fs18 c-pl4">暂含{{item.hasCourse || 0}}课</span>
              <span class="theme-fc c-fs24">
                <span v-if="item.payType == 2 || item.payType == 4">{{'￥' | iosPriceFilter}}</span>
                {{item.payType == 2 || item.payType == 4 ? `${item.price}` :item.payType == 3 ?'加密': '免费'}}
              </span>
            </div>
          </div>
          <div v-else-if="curSelectType == 5" class="c-hh160 c-flex-grow1 c-w0 c-pb20 c-bd-b1 c-ml20 c-flex-column">
            <div class="c-fs24 c-fw-b c-lh32 c-text-ellipsis2 c-fc-xblack">{{item.name}}</div>
            <div class=" c-flex-row c-aligni-center c-pt30">
              <span class="c-flex-grow1 c-fc-gray c-w0 c-fs18 c-pl4">考试{{item.hasCourse || 0}}套</span>
              <span class="theme-fc c-fs24">
                <span v-if="item.payType == 2 || item.payType == 4">{{'￥' | iosPriceFilter}}</span>
                {{item.payType == 2 || item.payType == 4 ? `${item.price}` :item.payType == 3 ?'加密': '免费'}}
              </span>
            </div>
          </div>
          <div v-else-if="curSelectType == 6" class="c-hh153 c-justify-sb c-flex-grow1 c-w0 c-pb20 c-bd-b1 c-ml20 c-flex-column">
            <div class="c-fs24 c-fw-b c-lh32 c-text-ellipsis2 c-fc-xblack">{{item.name}}</div>
            <div>
              <div class="c-flex-row c-fs18 c-fc-gray c-pb8" v-if="item.city">
                {{item.city}}
              </div>
              <div class="c-flex-row c-aligni-center">
                <span class="c-flex-grow1 c-w0 c-fs18 c-fc-gray">{{item.startAt}}</span>
                <span class="theme-fc c-fs24">{{item.price.split('~')[0]==item.price.split('~')[1] &&
                  item.price.split('~')[0] * 1 == 0 ? '免费': item.price.split('~')[0]==item.price.split('~')[1] ?
                    `${item.price.split('~')[0]}`:`${item.price.split('~')[0]}起`}}</span>
              </div>
            </div>

          </div>
          <div v-else-if="curSelectType == 7" class="c-hh153 c-justify-sb c-flex-grow1 c-w0 c-pb20 c-bd-b1 c-ml20 c-flex-column">
            <div class="c-fs22 c-lh32 c-text-ellipsis2 c-fc-xblack">{{item.name}}</div>
            <div class="c-flex-row c-aligni-center">
              <span class="c-flex-grow1 c-w0 c-fc-gray c-fs18 c-pl4">{{item.type == 1 ? '日历打卡':item.type == 2 ?'作业打卡':'闯关打卡'}}</span>
              <span class="theme-fc c-fs24"><span v-if="item.price * 1 > 0">{{'￥' | iosPriceFilter}}</span>{{item.price * 1 > 0 ? `${item.price}` : '免费'}}</span>
            </div>
          </div>
        </div>
        <loading-status-tem :dataStatus="dataStatus" noDataText="暂无内容"></loading-status-tem>
      </div>

      <div v-show="sourceList.length > 0" class="c-pa c-p-b0 c-p-l0 c-bg-white c-flex-row c-flex-center c-w100 c-hh86 c-fs24 bottom-btn-group">
        <div @click="closeSourceModal" class="c-ww240 c-hh60 c-bg-b3 c-flex-row c-flex-center c-br30 c-fc-white c-mr20">取消</div>
        <div @click="clickSentSource" class="c-ww240 c-hh60 c-bg-xblue c-flex-row c-flex-center c-br30 c-fc-white">发送</div>
      </div>
    </div>
  </transition>
</template>

<script>
import { utilJs } from "@/utils/common.js";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
const LIMIT = 10;
let pageIndex = 1;

export default {
  components: {
    loadingStatusTem,
  },
  props: {
    showSourceModal: {
      type: Boolean,
      default: false
    },
  },
  watch: {
    showSourceModal(val) {
      if (val) {
        this.initData();
      }
    },
  },

  data() {
    return {
      companyAuth: null,
      theme: localStorage.getItem("colorName") || "mb5_default",
      sourceTabList: [],
      searchName: '',
      sourceList: [],
      selectIndex: -1,
      curSelectType: 1,
      dataStatus: 'HAS_MORE_DATA',
    };
  },
  methods: {
    initData() {
      this.selectIndex = -1;
      pageIndex = 1;
      this.dataStatus = 'HAS_MORE_DATA';
      this.searchName = '';
      this.sourceList = [];
      this.getSourceList();
    },
    clickTab(type) {
      this.curSelectType = type;
      this.initData();
    },
    onScrollEvent(e) {
      let domModal = document.getElementById('souceScroll');
      if (this.dataStatus == 'HAS_MORE_DATA' && domModal.scrollTop + domModal.clientHeight > domModal.scrollHeight - 120) {
        this.getSourceList();
      }
    },
    clickChooseItem(index) {
      this.selectIndex = index;
    },
    clickSearch() {
      pageIndex = 1;
      this.getSourceList();
    },
    getSourceList() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      utilJs.getMethod(`${global.apiurl}social/getResourceList?name=${this.searchName}&type=${this.curSelectType}&page=${pageIndex}&limit=${LIMIT}`, res => {
        if (pageIndex == 1) {
          this.sourceList = res.data || [];
        } else {
          this.sourceList = [...this.sourceList, ...res.data];
        }
        if (res.data && (res.data.length < LIMIT)) {
          this.dataStatus = pageIndex == 1 && res.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA'
        } else {
          this.dataStatus = 'HAS_MORE_DATA'
          pageIndex++;
        }
      });
    },

    clickSentSource() {
      if (this.selectIndex == -1) {
        this.$showCjToast({
          text: "没有发送的内容",
          type: "warn",
          time: 1000
        });
        return;
      }
      this.$emit("clickSentSource", this.sourceList[this.selectIndex]);
      this.closeSourceModal();
    },

    closeSourceModal(e) {
      this.$emit("closeSourceModal");
    }
  },
  mounted() {
    this.companyAuth = localStorage.getItem("companyAuth") && JSON.parse(localStorage.getItem("companyAuth"));
    let columnAuth = this.companyAuth && this.companyAuth.enableColumnModule;
    let examAuth = this.companyAuth && this.companyAuth.enableExamModule;
    let activityAuth = this.companyAuth && this.companyAuth.enableActivityModule;
    let clockAuth = this.companyAuth && this.companyAuth.enableSignCardModule;
    let sourceArr = [{
      name: '课程',
      type: 1,
    }];
    columnAuth && sourceArr.push({
      name: '专栏',
      type: 4,
    });
    examAuth && sourceArr.push({
      name: '测评',
      type: 5,
    });
    activityAuth && sourceArr.push({
      name: '活动',
      type: 6,
    });
    clockAuth && sourceArr.push({
      name: '打卡',
      type: 7,
    });
    this.sourceTabList = sourceArr;
  },

};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.my-modal-page {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2018;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}
.source-tab-avtive {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 0.8rem;
  height: 0.15rem;
  /* background: linear-gradient(
    90deg,
    rgb(108, 193, 56) 0%,
    rgba(108, 193, 56, 0.5) 100%
  ); */
  background:#2194FF;
  border-radius: 3px;
}

input {
  border: 0;
  outline: none;
}

input:focus {
  outline: none;
}

.bottom-btn-group {
  box-shadow: 0px -3px 20px 0px rgba(0, 0, 0, 0.1);
}

.icon-course-mark {
  position: absolute;
  bottom: 0.2rem;
  right: 0.2rem;
  width: 0.7rem;
  height: 0.7rem;
}
</style>
